import type React from "react"
import { Card, CardContent, CardHeader, CardTitle, CardDescription, Skeleton } from "@/components/ui"
import { Suspense, use } from "react"

const CardSkeleton: React.FC = () => <>
    <Card className="w-[300px]">
        <CardHeader>
            <Skeleton className="h-[40px] w-full rounded-xl" />
        </CardHeader>
        <CardContent>
            {
                Array.from({ length: 5 }, (_, index) => (
                    <Skeleton key={index} className={`h-[15px] w-full rounded-xl ${index !== 4 ? 'mb-1' : ''}`} />
                ))
            }
        </CardContent>
    </Card>
</>

interface User {
    id: number
    name: string
    age: number
    gender: string
    email: string
    phone: string
    address: string
}

const getUserInfo = async () => {
    await new Promise((resolve) => setTimeout(() => resolve(1), 2000))
    return await fetch('/data.json').then((res) => res.json()) as { data: User[] }
}

const useGetUserInfo = getUserInfo()

const SuspenseComponent: React.FC = () => {

    const { data } = use(useGetUserInfo)
    return (
        <>
            {
                data.map((item) => (
                    <Card key={item.id} className="w-[300px]">
                        <CardHeader>
                            <CardTitle>{item.name}</CardTitle>
                        </CardHeader>
                        <CardContent>
                            <CardDescription>年龄：{item.age}岁</CardDescription>
                            <CardDescription>性别：{item.gender}</CardDescription>
                            <CardDescription>手机号：{item.phone}</CardDescription>
                            <CardDescription>邮箱：{item.email}</CardDescription>
                            <CardDescription>地址：{item.address}</CardDescription>
                        </CardContent>
                    </Card>
                ))
            }
        </>
    )
}


function AsyncSuspenseComponent() {
    return (
        <Suspense fallback={<CardSkeleton />}>
            <SuspenseComponent />
        </Suspense>
    )
}

export default AsyncSuspenseComponent